<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
   <canvas id="canvas" width="500" height="500" style="border:1px solid #ccc;"></canvas>
</body>
</html>

<script type="text/javascript">
	var canvas = document.getElementById('canvas');
	var context = canvas.getContext('2d');
	context.fillStyle = "#eeeeef";
	context.fillRect(0,0,500,500);
	//创建一个function
	function createStar(context) {
		
	var dx =50;
	var dy =50;
	//设定圆心
	var s = 50;
	//设定半径
	context.beginPath()
	context.fillStyle = "rgb(255,0,0,0.5)";
    var dig = 2*Math.PI/5*2;
    for (var i = 0;i <5;i++) {
    	var x = Math.sin(i*dig);
    	var y = Math.cos(i*dig);
    	context.lineTo(dx+x*s,dy+y*s);
	}    
    context.fill()
 }

 context.shadowOffsetX=20;
 context.shadowOffsetY=10;
 context.shadowBlur=3.5;
 context.shadowColor = 'rgba(100,100,100,0.5)';
 for (var i =0;i <3;i++) {
 	context.translate(100,100);
 	createStar(context);
 	
 }
 //createStar(context)
 //context.translate(100,100);
 //一个星星
 

</script>